import { useCallback, useState } from 'react';
import { YmReactDnd } from 'ym-design';
import Card from './Card';
const { HTML5DndProvider } = YmReactDnd;

function Sort() {
  const [indexDetail, setIndexDetail] = useState<{
    dragIndex: number;
    hoverIndex: number;
  }>({ dragIndex: -1, hoverIndex: -1 });
  const [cards, setCards] = useState<{ id: number; text: string }[]>([
    {
      id: 1,
      text: 'text1 S1-T0',
    },
    {
      id: 2,
      text: 'text2 S3-T2',
    },
    {
      id: 3,
      text: 'text3 S5-T4',
    },
  ]);

  const handleMoveCard = useCallback<
    (dragIndex: number, hoverIndex: number) => void
  >((dragIndex, hoverIndex) => {
    const dragItem = cards.splice(dragIndex, 1)[0];
    cards.splice(hoverIndex, 0, dragItem);
    // // console.log('--dragIndex--hoverIndex--:', dragIndex, hoverIndex);
    const newCards = [...cards];
    // console.log('--dragIndex--hoverIndex--handleMoveCard--newCards----:', dragIndex, hoverIndex, newCards)
    setCards(newCards);
  }, []);

  return (
    <div className="sort-for-dnd2">
      <HTML5DndProvider>
        <ul style={{ width: '400px' }}>
          {cards.map((card, i) => (
            <Card
              {...card}
              index={i}
              key={card.id}
              onMoveCard={handleMoveCard}
              indexDetail={indexDetail}
              onRefreshIndexDetail={setIndexDetail}
            />
          ))}
        </ul>
      </HTML5DndProvider>
    </div>
  );
}

export default Sort;
